<template>
  <view class="detail-container">
    <scroll-view :scroll-y="true" class="scroll-view">
      <view class="content-wrapper">
        <!-- Logo -->
        <view class="logo-section">
          <image src="/static/images/logo.png" class="logo-image"></image>
          <text class="logo-text">有趣有伴</text>
        </view>

        <!-- 服务信息 -->
        <view class="service-info-section">
          <text class="service-title">观影陪伴</text>
          <view class="price-info">
            <text class="price">¥210.00</text>
            <text class="unit">/小时</text>
            <text class="tag">可议价</text>
          </view>
          <view class="service-provider">
            <image
              src="/static/images/avatar1.jpg"
              class="provider-avatar"
            ></image>
            <text class="provider-name">小恬</text>
          </view>
        </view>

        <!-- 富文本内容 -->
        <rich-text :nodes="richTextContent"></rich-text>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="appointment-button" @click="navigateToCompanionList">选择达人</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const navigateToCompanionList = () => {
  // TODO: 这里应该将服务 ID 和选择的达人 ID 一起传递给订单支付页面
  uni.navigateTo({
    url: '/pages/order-payment/index'
  });
};

onLoad((options) => {
  if (options) {
    console.log('接收到的达人ID:', options.companionId);
    console.log('接收到的服务ID:', options.serviceId);
    // TODO: 在这里，你可以根据这两个 ID，从后端 API 获取达人和服务的详细信息，并渲染页面
  }
});

const richTextContent = ref(`
  <div style="padding: 15px;">
    <img src="/static/images/movie1.jpg" style="width: 100%; border-radius: 8px;" />
    <h2 style="font-size: 24px; margin-top: 20px;">和你看电影</h2>
    <p style="font-size: 16px; color: #666; margin-top: 10px;">“喜欢镜头里的每个故事”</p>
    <img src="/static/images/movie2.jpg" style="width: 100%; border-radius: 8px; margin-top: 20px;" />
    <img src="/static/images/movie3.jpg" style="width: 100%; border-radius: 8px; margin-top: 20px;" />
    <img src="/static/images/movie4.jpg" style="width: 100%; border-radius: 8px; margin-top: 20px;" />
    <img src="/static/images/movie5.jpg" style="width: 100%; border-radius: 8px; margin-top: 20px;" />
  </div>
`);
</script>

<style lang="scss" scoped>
.detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* 为底部操作栏留出空间 */
}

.content-wrapper {
  padding: 15px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.logo-image {
  width: 60px;
  height: 60px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.service-info-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-title {
  font-size: 20px;
  font-weight: bold;
}

.price-info {
  display: flex;
  align-items: baseline;
  margin-top: 15px;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #ffde58;
}

.unit {
  font-size: 14px;
  color: #999;
  margin-left: 4px;
}

.tag {
  font-size: 12px;
  color: #ffde58;
  border: 1px solid #ffde58;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 10px;
}

.service-provider {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.provider-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.provider-name {
  font-size: 14px;
  color: #333;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.appointment-button {
  background-color: #ffde58;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 0;
}
</style>
